<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css样式入门</title>
  <!-- 
    link标记用于引入css样式表文件
    href属性是要引入的css文件的路径名称
  -->
  <link rel="stylesheet" href="./h04.css">


  <!-- 
    style标记是用来编写css样式的
  -->
  <style>
    /* 
      css的格式
      选择器 {
        样式名称:样式值;
        ...
      }

      .类名称 叫做 class选择器
      表示对 class属性值为对应的类名称的元素套用它里面样式
    */

    .s1 {
      /* 
        color是颜色，值可以具体的颜色，比如red
        最常见的值是#颜色的数值，比如#ff0000
        是十六进制，0-f，每两位代表一个颜色，分别是rgb（红绿蓝）
        text-align是文字对齐方式，center居中，left靠左，right靠右
        font-size是字体大小，值可以是像素，例如16px
          rem单位是浏览器基准字体大小的倍数
      */
      color: #670467;
      text-align: center;
      font-size: 2rem;
    }
  </style>


</head>

<body>

  <!-- 
    写在元素的style属性中的css样式叫行内样式表
    只有少量的样式才会写在这里
  -->
  <span style="color: rgb(216, 12, 216)">样式入门1</span>
  <span style="font-size: 72px;">样式2</span>

  <hr>

  <div class="s1">
    页面内通过style标签来设置css样式
  </div>


  <p class="s1">
    style样式可以被重用
  </p>

  <hr>

  <div class="s2">
    外部css文件的样式
  </div>

</body>

</html>